<nz-collapseset [nzBordered]="false" class="filter-form">
    <nz-collapse [nzTitle]="'显示筛选条件'">

        <nz-card>
            <ng-template #body>
                <form nz-form [nzType]="'inline'" #filterForm="ngForm" (ngSubmit)="onSubmit()">

                    <div nz-form-item>
                        <div nz-form-label>
                            <label for="alarmDate">故障日期</label>
                        </div>
                        <div nz-form-control>
                            <nz-datepicker [(ngModel)]="filter.alarmDate1" name="alarmDate1" [nzSize]="'middle'" [nzPlaceHolder]="'开始日期'"></nz-datepicker>
                            <span nz-form-split>-</span>
                            <nz-datepicker [(ngModel)]="filter.alarmDate2" name="alarmDate2" [nzSize]="'middle'" [nzPlaceHolder]="'结束日期'"></nz-datepicker>
                        </div>
                    </div>
                    <div nz-form-item>
                        <div nz-form-label>
                            <label>出厂日期</label>
                        </div>
                        <div nz-form-control>
                            <nz-datepicker [(ngModel)]="filter.dateOfProduct1" name="dateOfProduct1" [nzSize]="'middle'" [nzPlaceHolder]="'开始日期'"></nz-datepicker>
                            <span nz-form-split>-</span>
                            <nz-datepicker [(ngModel)]="filter.dateOfProduct2" name="dateOfProduct2" [nzSize]="'middle'" [nzPlaceHolder]="'结束日期'"></nz-datepicker>
                        </div>
                    </div>
                    <div nz-form-item>
                        <div nz-form-label>
                            <label>运行时长</label>
                        </div>
                        <div nz-form-control>
                            <nz-input [(ngModel)]="filter.runTime1" name="runTime1" [nzSize]="'middle'" [nzType]='number' [nzPlaceHolder]="'最小时长(h)'"></nz-input>
                            <span nz-form-split>-</span>
                            <nz-input [(ngModel)]="filter.runTime2" name="runTime2" [nzSize]="'middle'" [nzPlaceHolder]="'最大时长(h)'"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item>
                        <div nz-form-label>
                            <label>设备型号</label>
                        </div>
                        <div nz-form-control>
                            <nz-input [(ngModel)]="filter.deviceType" name="deviceType" [(ngModel)]="filter.deviceType"></nz-input>
                        </div>
                    </div>

                    <div nz-form-item>
                        <div nz-form-label>
                            <label>故障I类</label>
                        </div>
                        <div nz-form-control>
                            <nz-select [(ngModel)]="filter.alarmType1" name="alarmType1" nzAllowClear [nzShowSearch]="true">
                                <nz-option *ngFor="let option of searchOptions" [nzLabel]="option.label" [nzValue]="option.value">
                                </nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div nz-form-item>
                        <div nz-form-label>
                            <label>故障II类</label>
                        </div>
                        <div nz-form-control>
                            <nz-select [(ngModel)]="filter.alarmType2" name="alarmType2" nzAllowClear [nzShowSearch]="true">
                                <nz-option *ngFor="let option of searchOptions" [nzLabel]="option.label" [nzValue]="option.value">
                                </nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div nz-form-item class="reeF-center-btn">
                        <div nz-form-control>
                            <button nz-button [nzSize]="'large'">确定</button>
                        </div>
                    </div>
                    <div nz-form-item class="reeF-center-btn">
                        <div nz-form-control>
                            <button nz-button [nzSize]="'large'" (click)="filterForm.reset()">重置</button>
                        </div>
                    </div>
                </form>
            </ng-template>
        </nz-card>

    </nz-collapse>
</nz-collapseset>
<nz-table #nzTable [nzAjaxData]="alarmList" [nzIsPagination]="false" [nzSize]="'middle'">
    <thead nz-thead>
        <tr>
            <th nz-th><span>型号/序列号</span></th>
            <th nz-th><span>故障一类</span></th>
            <th nz-th><span>故障二类</span></th>
            <th nz-th><span>故障发生时间</span></th>
        </tr>
    </thead>
    <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
            <td nz-td>{{data.deviceModel}}/{{data.deviceSid}}</td>
            <td nz-td>{{data.alarmType1}}</td>
            <td nz-td>{{data.alarmType2}}</td>
            <td nz-td>{{data.alarmDate}}</td>
        </tr>
    </tbody>
</nz-table>
<div class="reeF-center-btn">
    <button nz-button (click)="save(excelexport)">
        <span>另存为表格</span>
    </button>
</div>
<kendo-excelexport [data]="data" fileName="设备故障记录.xlsx" #excelexport>
    <kendo-excelexport-column field="deviceSid" title="序列号">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="deviceModel" title="型号">
    </kendo-excelexport-column>
</kendo-excelexport>

<button (click)="change()">change</button>